import React from 'react';

const styles = {
  standardSelected: {
    backgroundColor: 'red',
    cursor: "pointer"
  },
  markStandard: {
    cursor: "pointer"
  }
};

const MarkStandard = (props) => {
  const { list, markStandardSelected, selectMarkStandard, canMark } = props;

  return <div style={{ textAlign: 'left' }}>
    {list.map((item, index) =>
      canMark ?
        <div onClick={(e) => selectMarkStandard(item)}
             style={markStandardSelected.indexOf(item) !== -1 ? styles.standardSelected : styles.markStandard}
             key={index}>{item}</div> :
        <div
          style={markStandardSelected.indexOf(item) !== -1 ? styles.standardSelected : styles.markStandard}
          key={index}>{item}</div>
    )}
  </div>
};

export default MarkStandard;